<template>
	<!-- 创建到店单,到店记录 -->
	<view class="create-store-record">

		<!-- 提示语 -->
		<view class="info">
			为给您带来更优质和精准的服务体验，支付前请先添加车辆信息。
		</view>
		<!-- 表单主要内容 -->
		<view class="form-main">
			<!-- 车辆其他信息，车牌，VIN等 -->
			<view class="car-other-info">

				<!-- 姓名 -->
				<view class="row flex flex-ai-c">
					<view class="flex flex-ai-c left">
						<view style="opacity: 0;" class="requiredIcon">*</view>
						<view class="">姓名</view>
					</view>

					<view class="right flex flex-ai-c flex-jc-fe">
						<u-input v-model="userName" type="text" placeholder="请输入姓名" placeholder-style="color: #999;" />
					</view>
					<view></view>
				</view>


				<!-- 电话 -->
				<view class="row flex flex-ai-c">
					<view class="flex flex-ai-c left">
						<view class="requiredIcon">*</view>
						<view>电话</view>
					</view>

					<view class="right flex flex-ai-c flex-1 flex-jc-fe">
						<u-input v-model="userMobile" inputAlign="left" type="text" placeholder="请输入联系电话" placeholder-style="color: #999;font-size: 28rpx;" />
					</view>
					<view></view>
				</view>

				<!-- 品牌车型 -->
				<view class="row flex flex-ai-c">
					<view class="flex flex-ai-c left">
						<view class="requiredIcon">*</view>
						<view class="">品牌车型</view>
					</view>

					<view class="right flex flex-ai-c flex-jc-sb" @click="goBrand">
						<view style="font-size: 28rpx;">
							<!-- 请选择品牌车型 -->
							<view style="line-height: 40rpx;width: 90%;" class="specif">
								{{specifAll.brandlist.brand}} {{specifAll.Serieslist.carTypeName}}
								{{specifAll.Configulist.name}}
							</view>
							<!-- <u-input :disabled="true" v-model="userMobile" inputAlign="left" type="text" placeholder="请选择品牌车型" placeholder-style="color: #999;" /> -->
						</view>
						<view>
							<u-icon name="arrow-right" size="25" color="#999999"></u-icon>
						</view>
					</view>
				</view>

				<!-- 车牌 -->
				<view class="row flex flex-ai-c">
					<view class="flex flex-ai-c left">
						<view class="requiredIcon">*</view>
						<view>车牌</view>
					</view>

					<!-- 右 -->
					<view class="right flex flex-ai-c flex-jc-sb">
						<view class="car-number" @click="keyboardShow = true"><text>{{ abbrName }}</text>
							<i-icon icon="iconxiala1" type="single" size="20rpx" color="#999"></i-icon>
						</view>
						<view>
							<u-input v-model="carNum" inputAlign="left" type="text" maxlength="7" placeholder="请输入车牌号" placeholder-style="color: #999;font-size: 28rpx;"
							 @blur='changeCarNum' />
						</view>
						<view>
							<i-icon icon="iconsaoyisao" size="44rpx" @click.native="readPic(122)"></i-icon>
						</view>
						<!-- <input v-model="carNum" type="text" maxlength="7" placeholder="请输入车牌号" placeholder-style="color: #999;text-align: left" @blur="changeCarNum" /> -->

					</view>
					<u-keyboard v-model="keyboardShow" :show-tips="false" mode="car" :cancelBtn="false" :confirm-btn="false" :mask="false"
					 @change="keyboardChange"></u-keyboard>
				</view>

				<!-- vin -->
				<view class="row flex flex-ai-c">
					<view class="flex flex-ai-c left">
						<view class="requiredIcon" style="opacity: 0;">*</view>
						<view class="">车架号VIN</view>
					</view>

					<view class="right flex flex-ai-c flex-1 flex-jc-fe">
						<u-input v-model="carInfo.vin" type="text" maxlength="17" placeholder="请输入车架号VIN"
						 placeholder-style="color: #999;font-size: 28rpx;" @blur='vincheck' />
						<!-- <input v-model="carInfo.vin" type="text" maxlength="17" placeholder="请输入车架号VIN" placeholder-style="color: #999;" class="flex-1" -->
						<!-- @blur="vincheck" /> -->
						<view>
							<i-icon icon="iconsaoyisao" size="44rpx" @click.native="readPic(107)"></i-icon>
						</view>
					</view>


				</view>
			</view>
		</view>
		<!-- 按钮创建 -->
		<view class="btn-create">
			<button class="btn" @click="confirm()">确定</button>
		</view>
	
		<u-modal v-model="isComfin" title="温馨提示" :mask-close-able="true" :show-cancel-button="false" :show-confirm-button="false">
			<view style="margin: 37rpx 65rpx;color: #666666;font-size: 30rpx;">车辆信息添加成功，立即前往支付。</view>
			<view class="location-btn flex flex-jc-c">
				<view class="location-btn-1" @click="close">取消</view>
				<view class="location-btn-2" @click="pay">确定</view>
			</view>
		</u-modal>
	</view>
	
</template>

<script src="./createCar.js"></script>

<style lang="scss" scoped>
	@import './createCar.scss';
</style>
